<template>
	<div class="inv-dao-ru-edit">
		<BaseBillButtonGroup @add="addBill" @save="saveBill" @gotoList="gotoList" />
		<BaseBillTopInfo :billNo="master.billNo" :billStatus="master.billStatus" :createUserName="master.createUserId"
			:createTime="master.createTime" auditTime="" auditUserName="" class="bill-top-info" />
		<MkCardForm :model="master" ref="formRef" formId="basInvMessage">
			<MkSelect label="血液来源" prop="source" v-model="master.source" :isEdit="!isSave" :options="bloodStationOptions"
				:config="{ isEdit: !isSave, required: false }" />
			<MkSelect label="入库院区" prop="inHospitalArea" v-model="master.inHospitalArea" :isEdit="!isSave"
				:options="courtAreaOptions" :config="{ isEdit: !isSave, required: false }" />
			<MkSelect label="导入规则" prop="importRule" v-model="master.importRule" :isEdit="!isSave"
				:options="importRuleOptions" :config="{ isEdit: !isSave, required: false }" />
			<MkInput label="备注" v-model="master.remark" :isEdit="!isSave" :config="{ isEdit: !isSave, required: false }" />
		</MkCardForm>

		<div class="resize-container">
			<MkCard class="component-left">
				<el-button type="primary" :icon="Upload" :disabled="isSave" @click="selectFile">导入文件</el-button>
				<el-button type="danger" :icon="Delete" :disabled="isSave" @click="deleteDetail">删除</el-button>
				<MkTable :data="detailList" @selection-change="selectionChange">
					<el-table-column type="selection" :selectable="() => {
						return !isSave;
					}
						" width="55" />
					<MkColumnIndex />
					<MkColumnXueYe />
					<MkColumn label="采血日期" prop="gatheringDate" />
					<MkColumn label="金额" prop="price" />
				</MkTable>
			</MkCard>
			<div class="dividebox" ref="divideRef" v-resize="['.component-left', '.component-right', 850]"></div>
			<InvBloodSummary :bloodList="bloodList" class="component-right" />
		</div>
		<!-- 上传文件组件 -->
		<MkUpload v-show="false" ref="uploadRef" accept=".xls,.xlsx" :limit="1" :limitMb="100" :triggerChange="false"
			@uploadBefore="uploadChange" autoUpload />
	</div>
</template>

<script lang="ts" setup>
// 导入入库编辑界面
import { Delete, Upload } from '@element-plus/icons-vue';
import { ElMessage, } from 'element-plus';
import { InvAuditStockInMaster, InvAuditStockInDetail } from '/@/api/inv/invShouGong/dto';
import { isNull } from '/@/utils/index';
import useEditMSControls from '/@/componentsMaike/basHook/useEditMSControls';
import { useValidateFun } from './business/validateFun';
import { invDaoRuMaster } from '/@/api/inv/invDaoRu/dto';
/**
 * 注册emit事件
 */
const emits = defineEmits(['goto-list']);
/**
 * 组件实例
 */
const divideRef = ref<HTMLElement | null>(null);

/**
 * 血站选项
 */
const bloodStationOptions = [
	{ label: '本地血站', value: '本地血站' },
	{ label: '异地血站', value: '异地血站' },
];
/**
 * 入库院区选项
 */
const courtAreaOptions = [
	{ label: '院本部', value: '院本部' },
	{ label: '广州分院', value: '广州分院' },
];
/**
 * 导入规则选项
 */
const importRuleOptions = [
	{ label: '规则1', value: '规则1' },
	{ label: '规则2', value: '规则2' },
];
/**
 * 保存单据
 */
const saveDaoRu = async () => {
	isSave.value = true;
	master.billStatus = '已保存';
	master.billNo = '20220' + Math.floor(Math.random() * 10000);
	master.createTime = formatDate(new Date());
	master.createUserId = 'admin';
	return master;
};
/**
 * 新增单据
 */
const addBill = () => {
	Object.keys(master).forEach((key) => {
		master[key] = undefined;
	});
	if (divideRef.value && (divideRef.value as any).changeHeight) {
		(divideRef.value as any).changeHeight();
	}
	resetData();
	isSave.value = false;
	uploadRef.value.clearFiles();
};
/**
 * 选择明细
 */
const selectionList = ref<any[]>([]);
/**
 * 选择明细
 */
const selectionChange = (selection: any) => {
	selectionList.value = selection;
};
const deleteDetail = () => {
	if (selectionList.value.length === 0) {
		ElMessage.error('请选择要删除的明细');
		return;
	}
	let selectionListCopy = selectionList.value.map((item) => item.id);
	for (let id of selectionListCopy) {
		let index = detailList.findIndex((item) => item.id === id);
		if (index > -1) {
			detailList.splice(index, 1);
		}
	}
};
/**
 * 查看历史记录
 */
const gotoList = () => {
	emits('goto-list');
};

/**
 * 血液列表
 */
const bloodList = computed(() => {
	return detailList as any[];
});
/**
 * 上传文件
 */
const uploadRef = ref<any>();
/**
 * 选择文件
 */
const selectFile = () => {
	uploadRef.value.select();
};
/**
 * 上传文件改变
 */
const uploadChange = (file: File) => {
	let reg = /\.(xls|xlsx)$/;
	if (!reg.test(file.name)) {
		ElMessage.error('请上传excel文件');
		return;
	}
	for (let i = 0; i < 10; i++) {
		let item = {
			id: i,
			billNo: undefined,
			bloodDonationCode: '022042400478' + Math.floor(Math.random() * 10000) + i,
			basBloodProductCode: 'P0065V01',
			oldBloodCode: '022042400478' + Math.floor(Math.random() * 10000) + i,
			basBloodVarietyId: 1,
			abo: 'A',
			rhD: '+',
			volume: 2,
			unit: 'u',
			effectiveDate: '2025-01-01 00:00:00',
			gatheringDate: '2025-03-01 00:00:00',
			makeDate: '2025-04-01 00:00:00',
			price: 100,
			specialProcessing: '无',
			basBloodProductName: '洗涤红细胞2U',
			varietyName: '洗涤红细胞',
			xyzlName: '红细胞',
		};
		detailList.push({ ...item });
	}
	uploadRef.value.clearFiles();
};
/**
 * 获取单据详情
 */
const getDetail = async (billNo: string) => {
	let list = [];
	for (let i = 0; i < 10; i++) {
		let item = {
			id: i,
			billNo: undefined,
			bloodDonationCode: '022042400478' + Math.floor(Math.random() * 10000) + i,
			basBloodProductCode: 'P0065V01',
			oldBloodCode: '022042400478' + Math.floor(Math.random() * 10000) + i,
			basBloodVarietyId: 1,
			abo: 'A',
			rhD: '+',
			volume: 2,
			unit: 'u',
			effectiveDate: '2025-01-01 00:00:00',
			gatheringDate: '2025-03-01 00:00:00',
			makeDate: '2025-04-01 00:00:00',
			price: 100,
			specialProcessing: '无',
			basBloodProductName: '洗涤红细胞',
			varietyName: '洗涤红细胞',
			xyzlName: '红细胞',
		};
		list.push({ ...item });
	}
	let masterMessage: { [key: string]: any } = {
		billNo: '20220' + Math.floor(Math.random() * 10000),
		billStatus: '已保存',
		createTime: '2022-01-01 00:00:00',
		createUserId: 'admin',
		source: '本地血站',
		inHospitalArea: '院本部',
		importRule: '规则1',
		remark: '无',
	};
	return {
		masterMessage: masterMessage,
		detailMessage: list,
	};
};
/**
 * 模块化编辑器
 */
const { master, resetData, detailList, itemChange, saveBill, isSave, cancelBill } = useEditMSControls<invDaoRuMaster, InvAuditStockInDetail>(
	new invDaoRuMaster(),
	new Array<InvAuditStockInDetail>(),
	getDetail,
	saveDaoRu,
	() => validateFun()
);
// 校验处理
const { formRef, validateFun } = useValidateFun(detailList);
/**
 * 暴露
 */
defineExpose({ itemChange });
</script>

<style lang="scss" scoped>
.inv-dao-ru-edit {
	.bill-top-info {
		min-height: 40px;
	}

	.resize-container {
		display: flex;
		width: 100%;
		flex: 1;
		overflow: auto;

		.component-left {
			flex: 1;
		}

		.component-right {
			width: 40%;
		}
	}
}
</style>
